<template>
    <div v-show="show" :style="{backgroundColor:bgcolor}" class="top-box" @click="goTop" teleport="body">
        <van-icon :size="size" :name="name" :color="color"></van-icon>
    </div>
</template>

<script>

export default {
    props: {
        bgcolor: {
            type: String,
            default: '#ededed'
        },
        name: {
            type: String,
            default: 'back-top'
        },
        size: {
            type: Number,
            default: 30
        },
        color: {
            type: String,
            default: "inherit"
        }
    },
    data() {
        return {
            show: false
        };
    },
    methods: {
        goTop() {
            document.documentElement.scrollTop = 0
            document.body.scrollTop = 0
        }
    },
    mounted() {
        window.onscroll = () => {
            if (document.documentElement.scrollTop != undefined) {
                if (document.documentElement.scrollTop > 0) {
                    this.show = true
                    // console.log('this.show', this.show);
                    return
                }
            } else {
                if (document.body.scrollTop > 0) {
                    this.show = true
                    return
                }
            }
            this.show = false
        }
    }

}

</script>
<style scoped>
.top-box {
    border-radius: 50%;
    position: fixed;
    right: 10px;
    bottom: 60px;
}
</style>